<template>
	<view class="p-20">
		<view class="bg-blue text-white round-6 round-top-right-14 px-20 py-25 flex flex-y-center">
			<view class="flex flex-column grid-gap-8 flex-1">
				<text class="fs-17">账户点数</text>
				<text class="fs-25 fw-bold">{{USERINFO.points}}</text>
			</view>
			<view>
				<view class="bg-white py-4 px-12 round-30 text-blue fs-13" @click="$page.open('/pages/user/capital')">
					账单明细</view>
			</view>
		</view>

		<view class="bg-white px-10 py-20 mt-20 round-8 grid-columns-3 grid-gap-8">
			<viwe class=" w-p-100 h-100 round-4  flex flex-column grid-gap-6 flex-center" v-for="(item,index) in list"
				:key="index" :class="info.id==item.id?'item border-blue':'border-grey-1'" @tap="select(item)">
				<view>
					<text class="text-blue">￥</text>
					<text class="text-blue fw-bold fs-18">{{item.price}}</text>
				</view>
				<text class=" fs-15">{{item.points}}积分</text>
				<text class="fs-12 text-999">{{item.name}}</text>
			</viwe>
		</view>

		<view class="position-fixed bottom-0 left-0 right-0">
			<view class="pb-safe-area flex  px-20 flex-center bg-white pt-15">
				<view class="flex flex-column grid-gap-8 flex-1 mb-15">
					<text class="text-red fw-bold fs-18">￥{{info.price}}</text>
					<text class="text-666 fs-14">到账{{info.points}}点</text>
				</view>
				<view class="mb-10">
					<view class="btn-blue block px-12 py-4 fs-14 round-30 text-white" @click="submit">立即充值</view>
				</view>
			</view>
		</view>


		<y-popup ref='popupCountShow' round='8'>
			<view class="p-30 flex flex-column text-center">
				<text class="fs-20 text-333">{{count}}</text>
				<text class="fs-12 text-999 mt-10">支付结果查询中...</text>
			</view>
		</y-popup>
	</view>
</template>

<script setup>
	import { nextTick, ref } from "vue"
	import { onLoad } from '@dcloudio/uni-app'
	import { $http, $page, $tool } from "@/utils"
	import { pay } from '@/utils/pay'
	import { useUserStore, useRefs, useWebConfigStore } from '@/stores'
	const { USERINFO } = useRefs(useUserStore())
	const count = ref(10)
	const popupCountShow = ref()
	const info = ref({ id: 0 })
	const list = ref()
	onLoad(() => {
		getList()
	})

	const getList = () => {
		$http.get('Package/getList').then(res => {
			list.value = res.data
			info.value = res.data[0]
		})
	}

	const submit = () => {
		let source = 'weixin'
		// #ifdef H5
		source = 'official'
		// #endif 
		$http.post('Order/createOrder', { package_id: info.value.id, source: source }).then(res => {
			pay(source, res.data.pay_data).then(res1 => {
				getStatus(1)
				popupCountShow.value.open()
			}).catch(err => {
				$tool.toast('支付失败')
			})
		})
	}


	const select = (e) => {
		info.value = e
	}


	const getStatus = (id) => {
		$http.get('Order/getStatus', { id: id }).then(res => {
			if (res.data.status == true) {
				count.value = 10
				popupCountShow.value.close()
				$tool.toast('订单已支付')
			} else {
				if (count.value > 0) {
					setTimeout(() => {
						getStatus(id)
						count.value--
					}, 1000)
				} else {
					popupCountShow.value.close()
					count.value = 10
					$tool.toast('查询订单状态失败')
				}
			}
		})
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
		letter-spacing: 0rpx;
	}

	.item {
		background: rgba(0, 115, 255, 0.1);
	}
</style>